<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20">
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <el-col>操作</el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 放置一个el-tree组件 -->
        <el-tree :data="list" :props="defaultProps" :default-expand-all="true">
          <template v-slot="{data}">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%;"
            >
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="addDepart(data.id)">添加子部门</el-dropdown-item>
                        <el-dropdown-item @click.native="editDepart(data.id)">编辑部门</el-dropdown-item>
                        <el-dropdown-item>删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>

    </div>

    <template>
      <!-- 新增部门的弹层 -->
      <el-dialog title="新增部门" :visible="dialogVisible" @close="closeDialog" @open="openDialog">
        <template #default>
          <!-- 表单 -->
          <el-form ref="addForm" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
            </el-form-item>
            <el-form-item label="部门编码" prop="code">
              <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
            </el-form-item>
            <el-form-item label="部门负责人" prop="manager">
              <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
                <!-- label 下拉框的中文显示
                     value 选中的那一项的value值会自动绑定到form.manager 提交给后端传的是value -->
                <el-option
                  v-for="item in managerList"
                  :key="item.id"
                  :value="item.username"
                  :label="item.username"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="部门介绍" prop="introduce">
              <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" />
            </el-form-item>
          </el-form>
        </template>
        <template #footer>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </template>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import transTree from '@/utils/transTree'
import { fetchDepartment, fetchAddDepart, fetchEditDepart, fetchUpdateDepart } from '@/api/department'
import { getEmployeeSimple } from '@/api/employees'
export default {
  data() {
    // const code = (rule, value, callback) => {
    //   // 1. 声明一个空的codeList
    //   // 2. 判断当前是编辑还是新增 如果是新增 codelist就存放所有的code码
    //   // 如果是编辑状态 先把当前项已经回填的code从所有的codelist中删除 创建一个新的复制一份 删除这一份
    //   // 不要删除form里的 code 因为双向绑定 再赋值给codeList
    //   // 3. 开始使用数组的includes方法进行判断
    //   let codeList = []
    //   if (!this.form.id) {
    //     codeList = this.codelist
    //   } else {
    //     codeList = this.codelist.filter(code => code !== this.cacheCode)
    //   }
    //   if (codeList.includes(value)) {
    //     callback(new Error('重复啦，请换一个'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      // codelist: [],
      // 依赖一份树形数据
      list: [{
        name: '财务部',
        children: [
          {
            name: '财务核算部'
          },
          {
            name: '税务核算部'
          }
        ]
      }],
      managerList: [],
      defaultProps: {
        label: 'name'
      },
      // 添加子部门
      dialogVisible: false,
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '', // 部门介绍
        pid: '' // 当前要给谁新增子部门 代表它的id
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: ['blur', 'change'] }
          // { validator: code, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: ['blur', 'change'] }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created() {
    this.getList() // 用方法需要加this
  },
  methods: {
    async getList() {
      const res = await fetchDepartment()
      this.list = transTree(res.depts)
    },
    closeDialog() {
      this.dialogVisible = false
      this.$refs.addForm.resetFields()
    },
    async openDialog() {
      const data = await getEmployeeSimple()
      this.managerList = data
    },

    addDepart(id) {
      // 不管点击哪一项，都会把当前点击项的id记录到pid的位置
      this.form.pid = id
      this.dialogVisible = true
    },
    async editDepart(id) {
      this.dialogVisible = true
      const res = await fetchEditDepart(id)
      // this.cacheCode = res.code
      this.form = res
    },
    confirm() {
      // 兜底校验
      this.$refs.addForm.validate(async(valid) => {
        if (valid) {
          if (this.form.pid) {
            await fetchUpdateDepart(this.form)
          } else {
            await fetchAddDepart(this.form)
          }

          this.$message.success('添加成功')
          this.dialogVisible = false
          this.getList()
          this.$refs.addForm.resetFields()
        }
      })
    }

  }
}
</script>
